<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{php echo !empty($theme['USERCOMPANYNAME'])?$theme['USERCOMPANYNAME']:$_G['companyname'];} 实时投屏</title>
<link rel="stylesheet" href="{$_G['URL']['FCWORK_CSS']}fc_daping/css/animate.min.css" type="text/css">
<link rel="stylesheet" href="{$_G['URL']['FCWORK_CSS']}fc_daping/css/style.css?v=1" type="text/css">
<script src="{$_G['URL']['FCWORK_CSS']}fc_daping/js/jquery-1.12.4.min.js"></script>
<script>
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/19.2 + 'px'
      window.onresize = function() {
          document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/19.2 + 'px'
    
    }
</script>
	<style>
		/*时间换行与日期对齐*/
		.zxdd_nr ul li:nth-child(2) .xmbox2 p{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/*员工信息换行行高*/
		.xmbox3 p{
			line-height: 1.2em;
		}
		/*版权信息*/
		.footer p img{
			display: inline-block;
		}
		@media screen and (max-width: 800px) {
			.wzbox {
				background-size: 170% 100%;

			}
			.right{
				top: 3rem;
			}
			.zxtit{
				height: 5.8rem;
			}
			.left{
				top: 3.3rem;
			}
		}


	</style>
</head>

<body onload="time()">
<div class="wzbox">
	<div class="zxtit">
		<div class="wzbt">
			<h2>{$shopname}</h2>
		</div>
		<div class="left" >
			<p>TIME</p>
			<div id="showtime" ></div>
			<script type="text/javascript">
				function time(){
    //获得显示时间的div
    t_div = document.getElementById('showtime');
   var now=new Date()
    //替换div内容 
   t_div.innerHTML = ""+now.getFullYear()
    +"-"+(now.getMonth()+1)+"-"+now.getDate()
    +"  "+now.getHours()+":"+now.getMinutes()
    +":"+now.getSeconds()+"";
    //等待一秒钟后调用time方法，由于settimeout在time方法内，所以可以无限调用
   setTimeout(time,1000);
  }
			</script>
		</div>
		<div class="right">

    {if $_P['workerrank']=='1'}
<!--			<a href="/{php echo createMobileUrl('w_daping',array("themeid"=>$themeid));}"><h2>返回</h2></a>-->
			<a href="/{php echo createMobileUrl('w_daping',array("themeid"=>$themeid,'dpkey'=>$_P['dpkey']));}">
				<span><img src="{$_G['URL']['FCWORK_CSS']}fc_daping/images/a5_2.png"/></span>
			</a>
    {else}
    <a href="/{php echo createMobileUrl('w_daping',array("themeid"=>$themeid,"workerrank"=>1,'dpkey'=>$_P['dpkey']));}">
      <!-- 员工排名 -->
      <span><img src="{$_G['URL']['FCWORK_CSS']}fc_daping/images/a5.png"/></span>
    </a>
    {/if}
			


		</div>
	</div>
	<div class="wzxq">
		<div class="wzxq_left">
			<div class="wzxq_tit">
				<ul id="count">

				</ul>
			</div>
			<div class="wzxq_nr">
				<ul id="style-1">

				</ul>
			</div>
		</div>
		<div class="wzxq_right">
			<div class="zxdd_tit">
				<h2>最新订单</h2>
			</div>
			<div class="zxdd_nr" id="new-order-list">


			</div>
<!--			版权信息-->
<!--      <div class="yixuan">-->
<!--        {include file='yxworker/w_foot_yixuan'}-->
<!--      </div>-->
      
		</div>
	</div>
	<div class="footer">
		<!--			版权信息-->
		<p><a style="color: inherit" href="{php echo empty($theme['USERURL'])?$system['s']['yixuanurl']:$theme['USERURL'];}">{php echo empty($theme['USERJISHU'])?$system['s']['yixuanjishu']:html_entity_decode($theme['USERJISHU'], ENT_QUOTES);}</a></p>
	</div>
  <div style="display: none;">
    <audio id="haveorder" autoplay>
    </audio>
    <audio id="haveorder1" autoplay>
    </audio>
  </div>


</div>  
<script>

  var add_time ;
  $(function(){
    newBlessingBagAjax();
    setInterval(newBlessingBagAjax,{php echo empty($refresh_time)?5000:$refresh_time;});
  })

  if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    if (window.screen.widt<900){
        alert("当前电脑分辨率过底，建议调至1024*768以上")
    }else if (document.body.clientWidth<800){
        alert("请将页面最大化或全屏查看，效果更佳！")
    }
  }
  var endids = 0;

  function newBlessingBagAjax(){
    var url="/{php echo createMobileUrl('w_daping',array("themeid"=>$themeid,"company"=>$company,"op"=>'get',"workerrank"=>$_P['workerrank'],"team"=>$_P['team'],'dpkey'=>$_P['dpkey']));}";
    $.getJSON(url, function(omg){
              // console.log(omg)
              if(omg.code == 200){
                // 火速报名中
                var dui="";
                for(var i=0;i<omg.dui.length;i++){
                  dui+=`<li><dl>`;
                  dui+=`<a href="${omg.dui[i].url}"><dt><b><img src="{$_G['URL']['FCWORK_CSS']}fc_daping/images/a7.png"/>【${omg.dui[i].duiname}】</b></dt></a>
                    <dt>成交 <span>${omg.dui[i].counts}</span></dt>
                  <dt>转发 <span>${omg.dui[i].forward}</span></dt>
                  <dt>浏览 <span>${omg.dui[i].scansum}</span></dt></dl></li>`;
                }
                $('#style-1').html(dui);

                // 已报名人数
                var countss=omg.cunt.toString();
                $("#count").html(`
                <li><span>${countss[0]}</span></li>
                <li><span>${countss[1]}</span></li>
                <li><span>${countss[2]}</span></li>
                <li><span>${countss[3]}</span></li>
                <li><b>人</b></li>
            `);

                // 最新定单
                var list ='';
                for (var i = 0; i < omg.data.length; i++) {
                  list += `
                <ul><li><div class="xmbox1">
                    <img src="${omg.data[i].avatar}">
                  <h2>${omg.data[i].babyname}</h2>
                  <p>${omg.data[i].tel}</p>
                </div></li>
                <li><div class="xmbox2">
                <p><img src="{$_G['URL']['FCWORK_CSS']}fc_daping/images/a2.png"/><span>${omg.data[i].datetime}</span></p>
                </div></li><li><div class="xmbox3">
                <p>${omg.data[i].wkname}</p></div></li></ul>
              `;
                }

                $("#new-order-list").html(list);

                // 自动播放定单
                if(endids<omg.data[0].id){
                  playordermusic(omg.data[0].tips);
                  endids=omg.data[0].id;
                }
              }
            }
    );
  }

  /**
   * 时间戳转时间
   * @param  {[type]} timeStamp 时间戳
   * @return {[type]}           YYYY-mm-dd HH:ii:ss
   */
  // function formatDateTime() {
  //   var date = new Date()
  //   var y = date.getFullYear();
  //   var m = date.getMonth() + 1;
  //   m = m < 10 ? ('0' + m) : m;
  //   var d = date.getDate();
  //   d = d < 10 ? ('0' + d) : d;
  //   var h = date.getHours();
  //   h = h < 10 ? ('0' + h) : h;
  //   var minute = date.getMinutes();
  //   var second = date.getSeconds();
  //   minute = minute < 10 ? ('0' + minute) : minute;
  //   second = second < 10 ? ('0' + second) : second;
  //   // return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
  //   return h+':'+minute+':'+second;
  // };

  // setInterval(function(){
  //   $('#now_time').html(formatDateTime())
  // },1000);

  // setTimeout(function(){
  //   $('.noticeTag').fadeOut();
  // },3000)
  // 语音播报
  function playordermusic(tips){
    var text=tips;
    var music1 = "{$_G['URL']['DAPING_CSS']}music/ordermusic.mp3";
    var music2= "{$yxurl}"+encodeURI(encodeURI(text));
    // alert(music2)
    var audio1=$('#haveorder')[0];
    $(audio1).attr('src',music1);
    audio1.play();
    audio1.pause();
    audio1.play();

    audio1.addEventListener("ended", function(){
      var audio2=$('#haveorder1')[0];
      $(audio2).attr('src',music2);
      audio2.play();
      audio2.pause();
      audio2.play();
    });

  }

  // 监听手机微信提示音
  document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('haveorder').play();
    document.getElementById('haveorder1').play();
  }, false);
  
</script>

</body>
</html>
